<script setup lang="ts">
const props: any = defineProps<{
    ujt: any;
    opt: any;
}>();
const { $fn, $global, $db } = props.ujt;
</script>

<template>
    <h1>📃 {{ $fn.lg(props.opt.channel + '.ui.list') }}</h1>
    <ChannelPos :ujt="ujt" :opt="opt"></ChannelPos>
    <ChannelListSearch :ujt="ujt" :opt="opt"></ChannelListSearch>
    <div class="as-channel-list-area as-list-nth" :id="'popconfirm' + props.opt.channel + 'area'">
        <PopBoxConfirm :ujt="ujt" :id="'popconfirm' + props.opt.channel"></PopBoxConfirm>
        <ChannelList :ujt="ujt" :opt="opt">
            <template #default="{ item, opt }">
                <div :class="{
                    li: true,
                    cur:
                        item?.sn &&
                        $global.location.query?.show === item?.sn,
                }">
                    <div class="li" :title="item?.tit || ''" @pointerdown="opt.setShow(item?.sn || '')">
                        {{ item?.tit || '' }}
                    </div>
                    <div class="btns" v-if="3 < $global.user?.info?.lv">
                        <div @pointerdown.stop="
                            opt.optConfirm({
                                con:
                                    $fn.lg(
                                        props.opt.channel + '.ui.delconfirm'
                                    ) || $global.lang.asai.delconfirm,
                                fn: () => {
                                    opt.delItem(item?.sn);
                                },
                            })
                            ">
                            {{ $fn.lg(props.opt.channel + '.ui.del') }}
                        </div>
                        <div @pointerdown.stop="opt.editItem(item.sn)">
                            {{ $fn.lg(props.opt.channel + '.ui.edit') }}
                        </div>
                    </div>
                </div>
            </template>
        </ChannelList>
    </div>
    <div v-if="$db[props.opt.channel].pagelist.length > 1" class="as-channel-page">
        <ChannelListPage :ujt="ujt" :opt="opt"></ChannelListPage>
    </div>
</template>

<style scoped lang="scss"></style>
